<template>
    <div>
        <!-- 三级分类 -->
        <Category :scene="scene"></Category>
        <el-card class="my-3">
            <div v-show="scene == 0">
                <el-button type="primary" size="default" icon="Plus" :disabled="categoryStore.c3Id ? false : true"
                    @click="addSPU">添加SPU</el-button>
                <!-- 展示已有的SPU数据 -->
                <el-table border class="my-3" :data="records">
                    <el-table-column type="index" label="序号" width="180" align="center" />
                    <el-table-column property="spuName" label="SPU名称" align="center" />
                    <el-table-column property="description" label="SPU描述" align="center" show-overflow-tooltip />
                    <el-table-column label="操作" align="center">
                        <!-- row:即为已有的SPU对象 -->
                        <template #="{ row }">
                            <el-button type="primary" size="small" icon="Plus" title="添加SKU" @click="addSKU(row)" />
                            <el-button type="warning" size="small" icon="Edit" title="编辑SPU" @click="upDataSpu(row)" />
                            <el-button type="info" size="small" icon="InfoFilled" title="SKU详情" @click="findSku(row)" />
                            <el-popconfirm width="220" confirm-button-text="确定" cancel-button-text="取消" icon="InfoFilled"
                                icon-color="#626AEF" title="你确定要删除此数据吗?" @confirm="removeSpu(row.id)">
                                <template #reference>
                                    <el-button type="danger" size="small" icon="Delete" title="删除SPU" />

                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 9]"
                    :background="true" layout=" prev, pager,next, jumper,->, sizes,total," :total="total"
                    @current-change="getHasSpu()" @size-change="getHasSpu()" />
            </div>
            <!-- 添加spu和修改spu的子组件 -->
            <SpuForm ref="SpuForms" v-show="scene == 1" @changeScene="changeScene"> </SpuForm>
            <!-- 添加sku的子组件 -->
            <SkuForm ref="SkuForms" v-show="scene == 2" @changeScene="changeScene"></SkuForm>

        </el-card>

        <!-- 详情弹出框 -->

        <el-dialog v-model="dialogTableVisible" title="SKU列表">
            <el-table :data="skuArr" border>
                <el-table-column property="skuName" label="SKU名字" width="150" />
                <el-table-column property="price" label="SKU价格" width="200" />
                <el-table-column property="weight" label="SKU重量" />
                <el-table-column property="address" label="SKU图片">
                    <template #="{row}">
                        <img :src="row.skuDefaultImg" alt="" class="w-28 h-28">
                    </template>
                </el-table-column>>

            </el-table>
        </el-dialog>

    </div>
</template>

<script lang="ts" setup>
//引入
import { ElMessage } from 'element-plus'
import { ref, watch, onBeforeUnmount } from 'vue';
// 引入接口
import { reqHasSpu, reqDelSpu, reqSkuList } from '../../../api/product/spu/index'
// 引入分类仓库
import useCategoryStore from '@/store/modules/category'
let categoryStore = useCategoryStore()
//引入子组件
import SkuForm from './skuForm.vue'
import SpuForm from './spuForm.vue'
//场景数据
let scene = ref<number>(0)//0:显示已有的spu   1:添加或者修改spu   2:添加sku的结构
//分页器默认的页码
let pageNo = ref<number>(1)
//分页器的每一页展示几天数据
let pageSize = ref<number>(3)
let total = ref<number>()
//存储\已有的SPU数据
let records = ref([])
//sku数据
let skuArr = ref<any>()
//sku弹出框的显示隐藏
const dialogTableVisible = ref(false)
//  监听三级变化的改变 调用方法 获取数据
watch(() => categoryStore.c3Id, () => {
    if (!categoryStore.c3Id) return
    getHasSpu()
})
//获取数据
const getHasSpu = async () => {
    //修改当前的页码
    // pageNo.value=pager
    let result: any = await reqHasSpu(pageNo.value, pageSize.value, categoryStore.c3Id)
    if (result.code == 200) {
        records.value = result.data.records
        total.value = result.data.total
    }
}
//添加新的spu按钮的回调
const addSPU = () => {
    scene.value = 1
    //点击添加spu按钮,调用子组件的方法初始化
    SpuForms.value.initAddSpu(categoryStore.c3Id)
}
//查看spu详情的回调
const findSku = async (row: any) => {
    dialogTableVisible.value=true
    const result: any = await reqSkuList(row.id)
    skuArr.value = result.data
    console.log(skuArr);

}



//删除spu
const removeSpu = async (row: number) => {
    const result: any = await reqDelSpu(row)
    if (result.code == 200) {
        ElMessage({
            showClose: true,
            message: '删除成功',
            type: 'success',
        })
        getHasSpu()

    } else {
        ElMessage({
            showClose: true,
            message: '删除失败',
            type: 'info',
        })
    }

}
//获取子组件实例SpuForm
let SpuForms = ref<any>()
//获取子组件实例SkuForm
let SkuForms = ref<any>()
//修改已有的SPU按钮的回调
const upDataSpu = (row: any) => {
    scene.value = 1
    SpuForms.value.initHasSpuData(row)
}


// 子组件SpuForm绑定自定义事件:目前是让子组件通知父组件切换场景为0
const changeScene = (obj: any) => {

    //子组件spuform点击取消变为场景0
    scene.value = obj.flag
    if (obj.params == 'updata') {
        //更新留在当前页
        
        getHasSpu()

    } else {
        getHasSpu()
    }
    //在此获取全部的已有spu
}


//添加SKU按钮的切换场景为2
const addSKU = (row: any) => {
    scene.value = 2
    SkuForms.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row)
}

onBeforeUnmount(() => {
    categoryStore.$reset()
})
</script>

<style lang="scss" scoped></style>